<template>
    <el-tooltip
            class="item"
            effect="dark"
            :content="title"
            placement="right"
    >
        <el-button v-on="$listeners" v-bind="$attrs">
            <slot v-if="!$attrs.loading"><div><i :class="icon"></i></div></slot>
        </el-button>
    </el-tooltip>
</template>
<script>
    export default {
        name:"SquareButton",
        props:["icon","title","isBlue"],
        data() {
            return {
            };
        },
        created() {
        },
        watch:{
        },
        methods:{
        }
    };
</script>
<style lang="scss" scoped>
    .el-button{
        font-size: 32px;
        border: 1px solid #d2d2d2;
        text-align: center;
        width: 56px;
        padding: 0px;
        margin: 0px 10px 10px;
        height: 56px;
        padding-top: 2px;
    }
    .el-button.small{
        font-size: 28px;
        width: 48px;
        padding: 0px;
        margin: 6px;
        height: 48px;
        padding-top: 2px;
    }
</style>
